<!-- 物资调度 -->

<template>
  <FormSlot :label="label">
    <div>
      <span v-for="item in one[bind]" :key="item.id" class="el-button--text marginRight" @click="toOpen(item)">
        {{ item.name }} ( {{ item.quantity || 0 }} )
      </span>

      <span v-if="!isShow">
        <BtnText v-if="!CORE.isEmpty(one[bind])" title="清除" @click="toClear" />
        <BtnPrimary v-else title="选择" @click="toOpen()" />
      </span>
    </div>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MySupply',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('supply', 'supply_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 弹窗
     */
    toOpen(item = {}) {
      const { bind } = this
      this.supply_openEdit({ ...item, bind })
    },

    /**
     * 清除
     */
    toClear() {
      const { one, bind } = this
      one[bind] = []
    },
  },
}
</script>
